<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员刷卡</title>
</head>
<link type="text/css" rel="stylesheet" href="../commons/bootstrap/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="../commons/bootstrap/table/bootstrap-table.min.css">
<link type="text/css" rel="stylesheet" href="../commons/validate/bootstrapValidator.css">
<link type="text/css" rel="stylesheet" href="../commons/toastr/toastr.min.css">
<link type="text/css" rel="stylesheet" href="../commons/css/common.css" />
<style type="text/css">
    #topSlotCard{
        margin-left: 200px;
        width: 70%;
    }
    #tab1{
        height: 200px;
        width: 820px;
    }
    #tab1 td{
        width: 200px;
        height: 40px;
    }
</style>
<body>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    会员信息列表
                </h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-hover table-bordered" id="cardList">
                    <thead style="background-color: #BEDDFA">

                    </thead>
                </table>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div id="topSlotCard">
    <table id="tab">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">会员信息</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡ID</span>
                            <input class="form-control" placeholder="会员卡ID" name="serchCardId" id="serchCardId">
                        </div>
                    </div>
                    <button type="button" class="btn btn-danger" onclick="cardManage.search()">读卡</button>
                    <button type="button" class="btn btn-info" onclick="location.reload();">重置</button>
                    <button type="button" class="btn btn-primary" onclick="cardManage.show()">会员详情</button>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员ID  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="userId" id="userId">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员姓名  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="userName" id="userName">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡ID </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="cardId" id="cardId">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡余额</span>
                            <input class="form-control" placeholder="" readonly="readonly" name="amout" id="amout">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员等级  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="cardLevel" id="cardLevel">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员积分  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="credit" id="credit">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </table>
    <div class="panel panel-success">
        <div class="panel-body">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#userShow" data-toggle="tab">会员基本资料</a></li>
                <li><a href="#orderShow"  data-toggle="tab">会员消费记录</a></li>
                <li><a href="#rechargeShow" data-toggle="tab">会员充值记录</a></li>
            </ul>
            <div id="mytab-content" class="tab-content">
                <div class="tab-pane fade in active" id="userShow">
                    <table id="tab1" class="table table-bordered">
                        <tr>
                            <td>
                                会员编号
                            </td>
                            <td id="userIdShow">

                            </td>
                            <td>
                                会员姓名
                            </td>
                            <td id="userNameShow">

                            </td>
                        </tr>
                        <tr>
                            <td>
                                会员手机号
                            </td>
                            <td id="phoneShow">

                            </td>
                            <td>
                                会员地址
                            </td>
                            <td id="adressShow">

                            </td>
                        </tr>
                        <tr>
                            <td>
                                会员身份证
                            </td>
                            <td id="idNoShow">

                            </td>
                            <td>
                                会员卡状态
                            </td>
                            <td id="statusShow">

                            </td>
                        </tr>

                        <tr>
                            <td>
                                会员卡Id
                            </td>
                            <td id="cardIdShow">

                            </td>

                            <td>
                                会员卡余额
                            </td>
                            <td id="amountShow">

                            </td>
                        </tr>
                        <tr>
                            <td>
                                性别
                            </td>
                            <td id="sexShow">

                            </td>
                            <td>
                                会员卡等级
                            </td>
                            <td id="cardLevelShow">

                            </td>
                        </tr>
                    </table>
                </div>
                <div class="tab-pane fade" id="orderShow">
                    <table class="table table-striped table-hover table-bordered" id="orderList">
                        <thead style="background-color: #BEDDFA">

                        </thead>
                    </table>
                </div>
                <div class="tab-pane fade" id="rechargeShow">
                    <table class="table table-striped table-hover table-bordered" id="rechargeList">
                        <thead style="background-color: #BEDDFA">

                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../commons/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../commons/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="../commons/bootstrap/table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../commons/bootstrap/table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="../commons/validate/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="../commons/confirm/bootstrap.confirm.js"></script>
<script type="text/javascript" src="../commons/toastr/toastr.min.js"></script>
<script type="text/javascript" src="../commons/laydate/laydate.js"></script>
<script type="text/javascript" src="userSlotCardApi.js"></script>
<script type="text/javascript">
    $(function(){
        $('#myTab a').click(function(){
            $(this).tab('show')
        })
    })
</script>
</html>